<template>
	<view>
		<view v-if="(!weightList || weightList.length <= 0) && noDataFlag" class="no_data">暂无数据，请先在首页添加体重数据。</view>

		<view class="type_out">
			<view class="type_item" :class="typeIndex == index ? 'select': ''" v-for="(item, index) in typeList"
				:key="index" @click="selectType(index)">{{item.name}}</view>
		</view>


		<view class="charts-box" :style="{height : 800 + 'rpx'}">
			<qiun-data-charts canvasId="canvasid23423324" type="line" :opts="opts" :chartData="chartData" />
		</view>


		<!--  底部组件  -->
		<bottom-navigation :navigationIndex="1"></bottom-navigation>
	</view>
</template>

<script>
	import {
		findWeightListApi
	} from '@/api/weightApi.js'
	import storageUtil from '@/utils/storageUtil.js'
	import {
		getDate,
		getYear,
		getMonth,
		getDay,
		getHour,
		getMinute,
		getSecond,
		compareDate,
		addDate,
		compareYearMonth
	} from '@/utils/dateUtil.js'
	import {
		formatTimeByMothAndDay,
		formatTimeByYearAndMoth
	} from '@/utils/formatUtil.js'

	const app = getApp()


	export default {
		name: 'foldLine',
		data() {
			return {
				// 系统平台
				system: app.globalData.system,
				// 导航栏高度
				navigationHeight: app.globalData.navigationHeight,
				// 统一背景颜色
				unifyBgColor: app.globalData.unifyBgColor,
				// 顶部导航栏高度
				topNavigationHeight: app.globalData.topNavigationHeight,
				// 主色调
				mainColor: app.globalData.mainColor,
				// 最大的高度
				maxHeight: app.globalData.maxHeight,
				// ec 用于折线展示的数据
				ec: {},
				// 体重集合
				weightList: [],
				// 统计类型集合
				typeList: [{
					name: "近一月",
					value: "last_one_mouth",
				}, {
					name: "近三月",
					value: "last_three_mouth",
				}, {
					name: "近一年",
					value: "last_one_year",
				}, {
					name: "近五年",
					value: "last_five_year",
				}],
				// 类型下标
				typeIndex: 0,
				// 没有数据标志
				noDataFlag: false,
				// 这里初始化一个null，待会儿用来充当echarts实例
				myChart: null,
				opts: {
					// 不显示数据点
					dataLabel: false,
					series: {
						pointShape: "none",
					},

					xAxis: {
						labelCount: 4,
						disableGrid: true
					},
					yAxis: {
						format: function() {
							return ''
						}
						// data: [{
						// 	min: 0
						// }]
					},
					// extra: {
					// 	column: {
					// 		type: "group"
					// 	}
					// }
				},
				chartData: {},

			}
		},

		onLoad(options) {

			setTimeout(() => {
				this.noDataFlag = true
			}, 1000)
		},
		onReady() {
			this.findAllWeight();
		},

		methods: {




			// 查找全部体重数据
			findAllWeight() {
				let form = {}
				// 根据何值分组
				let typeIndex = this.typeIndex
				if (typeIndex == 0) {
					form.groupField = "date"
					form.date = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30)
				} else if (typeIndex == 1) {
					form.groupField = "date"
					form.date = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 3)
				} else if (typeIndex == 2) {
					form.groupField = "yearMonth"
					form.date = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 12 * 1)
				} else {
					form.groupField = "yearMonth"
					form.date = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 12 * 5)
				}
				form.openid = storageUtil.getOpenId()
				console.log("form : ", form)
				form.skip = 0
				form.pageSize = 100
				findWeightListApi(form).then((res) => {
					console.log('查询体重数据成功呢...... : ', res)
					console.log('全部体重数据 : ', res)
					this.weightList = res.data
					// 设置初始化函数
					this.resetOption()
				}, (res) => {
					console.log("调用查询体重异常 : ", res)
				}).finally((res) => {
					console.log("调用查询体重完成 : ", res)
				}).catch((res) => {
					console.log('异常 res : ', res)
				})
			},

			// 设置折线数据
			resetOption() {
				console.log('resetOption..........')
				let typeIndex = this.typeIndex
				let xList = []
				let valueList = []
				console.log('typeIndex : ', typeIndex)
				if (typeIndex == 0 || typeIndex == 1) {
					xList = this.getDateXList()
					valueList = this.getDateValueList(xList.length)
				} else {
					xList = this.getMonthXList()
					valueList = this.getMonthValueList(xList.length)
				}

				let options = {
					categories: xList,
					series: [{
						name: "体重",
						data: valueList,
						pointShape: 'none'
					}]
				};
				console.log('options : ', options)
				this.chartData = JSON.parse(JSON.stringify(options));
			},

			// 获得x坐标集合
			getDateXList() {
				console.log('getDateXList.....')
				let weightList = this.weightList
				let xList = []
				// for (let i = 0; i < weightList.length; i++) {
				//   let item = weightList[i]
				//   //xList.push(item.dateTime)
				//   xList.push(item.dateTime)
				// }
				// 没有数据
				if (weightList.length == 0) {
					return xList
				}
				// 只有一个
				if (weightList.length == 1) {
					xList.push(formatTimeByMothAndDay(new Date(weightList[0].dateTime)))
					return xList
				}
				let startTime = new Date(weightList[0].dateTime)
				let startTimeStamp = startTime.getTime()
				let lastTime = new Date(weightList[weightList.length - 1].dateTime)
				lastTime.setHours(23, 59, 59, 999)
				let lastTimeStamp = lastTime.getTime()
				let typeIndex = this.typeIndex
				for (; startTimeStamp < lastTimeStamp; startTimeStamp = startTimeStamp + 60 * 60 * 24 * 1000) {
					xList.push(formatTimeByMothAndDay(new Date(startTimeStamp)))
				}
				console.log("xList : ", xList)
				return xList
			},

			// 获得x坐标集合
			getMonthXList() {
				let weightList = this.weightList
				let xList = []

				// 没有数据
				if (weightList.length == 0) {
					return xList
				}
				// 只有一个
				if (weightList.length == 1) {
					xList.push(formatTimeByMothAndDay(new Date(weightList[0].dateTime)))
					return xList
				}
				let startTime = new Date(weightList[0].date)
				let lastTime = new Date(weightList[weightList.length - 1].date)
				// 设置为下个月的第一天第0秒
				// 增加一个月
				lastTime = addDate(lastTime, 0, 1)
				// 设置为第一天
				lastTime.setDate(1)
				// 设置为第0秒
				lastTime.setHours(0, 0, 0, 0)
				for (; compareDate(startTime, lastTime) < 0; startTime = this.getNextMonth(startTime)) {
					xList.push(formatTimeByYearAndMoth(new Date(startTime)))
				}
				console.log("xList : ", xList)
				return xList
			},

			// 获得下一个月的时间
			getNextMonth(date) {
				// 增加一个月时间
				date = addDate(date, 0, 1)
				console.log('next month : ', formatTimeByYearAndMoth(date))
				return date
			},

			// 获得x坐标的值集合
			getMonthValueList(maxLength) {
				console.log('getMonthValueList.........')
				let weightList = this.weightList
				let valueList = []
				// for (let i = 0; i < weightList.length; i++) {
				//   let item = weightList[i]
				//   //xList.push(item.dateTime)
				//   xList.push(item.dateTime)
				// }
				// 没有数据
				if (weightList.length == 0) {
					return valueList
				}
				// 只有一个
				if (weightList.length == 1) {
					valueList.push(weightList[0].weight)
					return valueList
				}
				let startTime = new Date(weightList[0].date)
				let startTimeStamp = startTime.getTime()
				let lastTime = new Date(weightList[weightList.length - 1].dateTime)
				// 设置为下个月的第一天第0秒
				// 增加一个月
				lastTime = addDate(lastTime, 0, 1)
				// 设置为第一天
				lastTime.setDate(1)
				// 设置为第0秒
				lastTime.setHours(0, 0, 0, 0)
				// 体重数据下标
				let weightIndex = 0
				for (; compareYearMonth(startTime, lastTime) <= 0 && valueList.length < maxLength; startTime = this
					.getNextMonth(startTime)) {
					console.log('weightIndex : ', weightIndex)
					console.log('startTime : ', formatTimeByYearAndMoth(startTime))
					console.log('lastTime : ', formatTimeByYearAndMoth(lastTime))
					// 体重item
					let itemWeight = weightList[weightIndex]
					let weightDate = new Date(itemWeight.date)
					let topWeight = itemWeight.weight
					// 当前item的时间
					let compareValue = compareYearMonth(startTime, weightDate)
					if (compareValue == -1) {
						valueList.push(topWeight)
					} else if (compareValue == 0) {
						valueList.push(topWeight)
					} else {
						weightIndex++
						topWeight = weightList[weightIndex].weight
						startTime = addDate(startTime, 0, -1)
					}
				}
				console.log("valueList : ", valueList)
				return valueList
			},

			// 获得x坐标的值集合
			getDateValueList(maxLength) {
				let weightList = this.weightList
				let valueList = []
				// for (let i = 0; i < weightList.length; i++) {
				//   let item = weightList[i]
				//   //xList.push(item.dateTime)
				//   xList.push(item.dateTime)
				// }
				// 没有数据
				if (weightList.length == 0) {
					return valueList
				}
				// 只有一个
				if (weightList.length == 1) {
					valueList.push(weightList[0].weight)
					return valueList
				}
				let startTime = new Date(weightList[0].dateTime)
				let startTimeStamp = startTime.getTime()
				let lastTime = new Date(weightList[weightList.length - 1].dateTime)
				lastTime.setHours(23, 59, 59, 999)
				let lastTimeStamp = lastTime.getTime()
				let topWeight = weightList[0].weight
				let weightIndex = 0
				for (; startTimeStamp <= lastTimeStamp && valueList.length < maxLength; startTimeStamp = startTimeStamp +
					60 * 60 * 24 * 1000) {
					let itemWeight = weightList[weightIndex]
					let weightDate = new Date(itemWeight.dateTime)
					let itemDate = new Date(startTimeStamp)
					let compareValue = compareDate(itemDate, weightDate)
					if (compareValue == -1) {
						valueList.push(topWeight)
					} else if (compareValue == 0) {
						valueList.push(topWeight)
					} else {
						weightIndex++
						topWeight = weightList[weightIndex].weight
						startTimeStamp = startTimeStamp - 60 * 60 * 24 * 1000
					}
				}
				console.log("valueList : ", valueList)
				return valueList
			},

			// 选择分类下标
			selectType(index) {
				if (index == this.typeIndex) {
					return
				}
				this.typeIndex = index
				// 刷新折线图
				this.findAllWeight()
			}
		}
	}
</script>

<style>
	/*  类型外部  */
	.type_out {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		width: 100%;
	}

	/*  类型项  */
	.type_item {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		text-align: center;
		color: white;
		border: solid 1rpx white;
		border-radius: 10rpx;
		background-color: rgb(18, 150, 219);
	}

	.type_item.select {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		text-align: center;
		color: rgb(18, 150, 219);
		border: solid 1rpx rgb(18, 150, 219);
		border-radius: 10rpx;
		background-color: white;

	}

	/*暂无数据*/
	.no_data {
		position: fixed;
		left: 0;
		top: 300rpx;
		width: 100%;
		text-align: center;
		height: 100rpx;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.charts-box {
		width: 100%;
		/* 		height: 300px; */
	}
</style>
